<div class="effeckt effeckt-demo-buttons group">

  <header>
    <h2>
      Buttons
      <a href="buttons.html">#</a>
    </h2>
    <span class="source">
      Sources:
      <a href="http://lab.hakim.se/ladda/">
        Hakim El Hattab
      </a>
      /
      <a href="http://tympanus.net/codrops/2013/06/13/creative-button-styles/">
        Codrops
      </a>
    </span>
  </header>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="expand-right"><span class="label">Expand Right</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="expand-left"><span class="label">Expand Left</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="expand-up"><span class="label">Expand Up</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="expand-down"><span class="label">Expand Down</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="slide-left"><span class="label">Slide Left</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="slide-right"><span class="label">Slide Right</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="slide-up"><span class="label">Slide Up</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="slide-down"><span class="label">Slide Down</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="zoom-out"><span class="label">Zoom Out</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="zoom-in"><span class="label">Zoom in</span> <span class="spinner"></span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="fill-from-left"><span class="effeckt-button-label">Fill from left</span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="fill-from-right"><span class="effeckt-button-label">Fill from right</span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="fill-from-top"><span class="effeckt-button-label">Fill from top</span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="fill-from-bottom"><span class="effeckt-button-label">Fill from bottom</span></button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="icon-slide from-top">
      <span class="effeckt-button-label demo-button-icon">Icon from top</span>
    </button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="icon-slide from-bottom">
      <span class="effeckt-button-label demo-button-icon">Icon from bottom</span>
    </button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="icon-slide from-left">
      <span class="effeckt-button-label demo-button-icon">Icon from left</span>
    </button>
  </div>

  <div class="button-demo-wrap">
    <button class="effeckt-button" data-effeckt-type="icon-slide from-right">
      <span class="effeckt-button-label demo-button-icon">Icon from right</span>
    </button>
  </div>

  <div class="button-demo-wrap perspective">
    <button class="effeckt-button" data-effeckt-type="3d-rotate-success" data-effeckt-message="It Worked!">
      <span class="effeckt-button-label">3D Success</span>
    </button>
  </div>

  <div class="button-demo-wrap perspective">
    <button class="effeckt-button" data-effeckt-type="3d-rotate-error" data-effeckt-message="Error!">
      <span class="effeckt-button-label">3D Fail</span>
    </button>
  </div>

</div>
